<template>
    <div>
        <!--        <div class='crumbs'>-->
        <!--            <el-breadcrumb separator='/'>-->
        <!--                <el-breadcrumb-item>-->
        <!--                    <i class='el-icon-lx-cascades'></i> 基础表格-->
        <!--                </el-breadcrumb-item>-->
        <!--            </el-breadcrumb>-->
        <!--        </div>-->
        <div class='container'>
            <div class='handle-box'>
                <!--                <el-button-->
                <!--                    type='primary'-->
                <!--                    icon='el-icon-delete'-->
                <!--                    class='handle-del mr10'-->
                <!--                    @click='delAllSelection'-->
                <!--                >批量删除-->
                <!--                </el-button>-->

                <!--                <el-select v-model='query.address' placeholder='地址' class='handle-select mr10'>-->
                <!--                    <el-option key='1' label='广东省' value='广东省'></el-option>-->
                <!--                    <el-option key='2' label='湖南省' value='湖南省'></el-option>-->
                <!--                </el-select>-->

                <el-input v-model='query.userName' placeholder='用户名' class='handle-input mr10'></el-input>
                <!--                <el-input v-model='query.userName' placeholder='用户名' class='handle-input mr10'></el-input>-->


                <el-date-picker
                    v-model="query.cdate"
                    type="daterange"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>

                <el-select style='margin-left: 10px' v-model='query.action' placeholder='事件' class='handle-select mr10'>

                    <el-option key='0' label='全部' value=''></el-option>
                    <el-option key='1' label='登录' value='1'></el-option>
                    <el-option key='2' label='注销' value='2'></el-option>
                </el-select>


                <el-button type='primary' icon='el-icon-search' @click='handleSearch'>搜索</el-button>
                <el-button type='primary' icon='el-icon-refresh-left' @click='resetSearch'>重置</el-button>

            </div>

            <el-table
                :data='tableData'
                border
                class='table'
                ref='multipleTable'
                header-cell-class-name='table-header'
                @selection-change='handleSelectionChange'
            >
                <el-table-column type='selection' width='55' align='center'></el-table-column>
                <el-table-column type='index' width='55' label='序号' align='center'></el-table-column>
                <!--                <el-table-column prop='id' label='ID' width='55' align='center'></el-table-column>-->

                <el-table-column prop='action' label='事件'></el-table-column>
                <el-table-column prop='createUser' label='用户名' align='center'></el-table-column>


                <!--                <el-table-column label='账户余额'>-->
                <!--                    <template slot-scope='scope'>￥{{ scope.row.money }}</template>-->
                <!--                </el-table-column>-->


                <el-table-column prop='createTime' label='创建日期'></el-table-column>



                <!--工具栏-->
                <!--                <el-table-column label='操作' width='180' align='center'>-->
                <!--                    <template slot-scope='scope'>-->
                <!--                        <el-button-->
                <!--                            type='text'-->
                <!--                            icon='el-icon-edit'-->
                <!--                            @click='handleEdit(scope.$index, scope.row)'-->
                <!--                        >编辑-->
                <!--                        </el-button>-->
                <!--                        <el-button-->
                <!--                            type='text'-->
                <!--                            icon='el-icon-delete'-->
                <!--                            class='red'-->
                <!--                            @click='handleDelete(scope.$index, scope.row)'-->
                <!--                        >删除-->
                <!--                        </el-button>-->
                <!--                    </template>-->
                <!--                </el-table-column>-->

            </el-table>
            <div class='pagination'>
                <el-pagination
                    background
                    layout='total, prev, pager, next'
                    :current-page='query.pageIndex'
                    :page-size='query.pageSize'
                    :total='pageTotal'
                    @current-change='handlePageChange'
                ></el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <!--        <el-dialog title='编辑' :visible.sync='editVisible' width='30%'>-->
        <!--            <el-form ref='form' :model='form' label-width='70px'>-->
        <!--                <el-form-item label='用户名'>-->
        <!--                    <el-input v-model='form.name'></el-input>-->
        <!--                </el-form-item>-->
        <!--                <el-form-item label='地址'>-->
        <!--                    <el-input v-model='form.address'></el-input>-->
        <!--                </el-form-item>-->
        <!--            </el-form>-->
        <!--            <span slot='footer' class='dialog-footer'>-->
        <!--                <el-button @click='editVisible = false'>取 消</el-button>-->
        <!--                <el-button type='primary' @click='saveEdit'>确 定</el-button>-->
        <!--            </span>-->
        <!--        </el-dialog>-->
    </div>
</template>

<script>
import { fetchData } from '../../api/index';

export default {
    name: 'basetable',
    data() {
        return {
            query: {
                cdate: [],
                userName: '',
                action: '',//事件
                pageIndex: 0,
                pageSize: 10
            },

            tableData: [],
            multipleSelection: [],//多选值
            delList: [],//删除值
            editVisible: false,
            pageTotal: 0,
            form: {},
            idx: -1,
            id: -1

        };
    },
    //初始化函数
    created() {

        this.getData();

    },
    methods: {
        // 给数据表格赋值
        getData: function() {
            this.$http.post('/basicserver/logcontroller/listall2.json', this.query).then(res => {
                console.log(res);
                this.tableData = res.data.data.records;//数据
                this.pageTotal = res.data.data.total;//总数

            });
        },


        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 0);//重置为首页
            this.getData();//重新请求赋值
        },

        // 触发重置按钮
        resetSearch() {
            this.query.cdate = [];
            this.query.userName = '';
            this.query.action = '';
            this.$set(this.query, 'pageIndex', 0);//重置为首页
            this.getData();//重新请求赋值
        },
        // 删除操作
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.$message.success('删除成功');
                    this.tableData.splice(index, 1);
                })
                .catch(() => {
                });
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        delAllSelection() {
            const length = this.multipleSelection.length;
            let str = '';
            this.delList = this.delList.concat(this.multipleSelection);
            for (let i = 0; i < length; i++) {
                str += this.multipleSelection[i].name + ' ';
            }
            this.$message.error(`删除了${str}`);
            this.multipleSelection = [];
        },
        // 编辑操作
        handleEdit(index, row) {
            this.idx = index;
            this.form = row;
            this.editVisible = true;
        },
        // 保存编辑
        saveEdit() {
            this.editVisible = false;
            this.$message.success(`修改第 ${this.idx + 1} 行成功`);
            this.$set(this.tableData, this.idx, this.form);
        },
        // 分页导航
        handlePageChange(val) {
            console.log(val);
            this.$set(this.query, 'pageIndex', val);
            this.getData();
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
